{% extends 'goods/base_goods.html' %}

{% block head %}
    <script>
        function send_cart_add(){
            num = parseInt($('#num_show').val())
            $.get('/cart/add/{{ goods.id }}/'+ num + '/',function (data) {
                $('#show_count').text(data.cart_count);
            })
        }
        function get_comment_goods(goods_id){
            $.get('/goods/comment/' + goods_id +'/',function (data) {
                tab_comment = $('#tab_comment')
                tab_comment.children().remove()
                for (var i=0;i<data.context.length;i++) {
                    var dt=$("<dt></dt>").text(data.context[i].username+':')
                    var dd=$("<dd></dd>").text(data.context[i].content)
                    tab_comment.append(dt,dd)
                }
            })
        }
        $(function () {
            {#只有点击加入购物车的时候才添加商品到购物车#}
            $('#add_cart').click(function () {
                send_cart_add()
            });
            $('#num_show').blur(function () {
                num = parseInt($('#num_show').val()) //val() 返回或者是设置被选中这个元素的值
                if (num<1){
                    $('#num_show').val(1)
                    goodsprice = {{ goods.price }}
                    $('#goods_total').text(goodsprice.toFixed(2))
                } else {
                    price = {{ goods.price }} //拿出商品的单价
                    total = num * price //计算商品的总价
                    $('#num_show').val(num) //展示购买的商品的数量
                    $('#goods_total').text(total.toFixed(2)) //展示总价
                }
            })
            $('#add').click(function () {
                num = parseInt($('#num_show').val())
                $('#num_show').val(num+1)
                $('#num_show').blur()
            })
            $('#reduce').click(function () {
                num = parseInt($('#num_show').val())
                if (num > 1){
                    $('#num_show').val(num-1)
                    $('#num_show').blur()
                }
            })
            $('#detail').click(function () {
                $(this).attr('class','active')
                $(this).next().attr('class','')
                $(this).next().next().attr('class','')
                $('#tab_comment').attr('hidden','')
                $('#tab_add_comment').attr('hidden','')
                $('#tab_detail').removeAttr('hidden')
            })
            $('#comment').click(function () {
                $(this).attr('class','active')
                $(this).prev().attr('class','')
                $(this).next().attr('class','')
                $('#tab_detail').attr('hidden','')
                $('#tab_add_comment').attr('hidden','')
                $('#tab_comment').removeAttr('hidden')
                get_comment_goods($('#goods_id').text())
            })
            $('#add_comment').click(function () {
                $(this).attr('class','active')
                $(this).prev().attr('class','')
                $(this).prev().prev().attr('class','')
                $('#tab_detail').attr('hidden','')
                $('#tab_comment').attr('hidden','')
                $('#tab_add_comment').removeAttr('hidden')
            })
        })    
    </script>
{% endblock %}

{% block content %}
<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">{{ goods.category.category_name }}</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>
    <div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img src="{{ goods.pic }}"></div>

		<div class="goods_detail_list fr">
            <h id="goods_id" hidden>{{ goods.id }}</h>
			<h3>{{ goods.goods_name }}</h3>
			<p>{{ goods.abstract }}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em id="price">{{ goods.price }}</em></span>
				<span class="show_unit">单  位：{{ goods.unit }}</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：{{ goods.stock }}</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1" id="num_show">
					<a href="javascript:;" class="add fr" id="add">+</a>
					<a href="javascript:;" class="minus fr" id="reduce">-</a>
				</div>
			</div>
			<div class="total">总价：<em id="goods_total">{{ goods.price }}</em>元</div>
			<div class="operate_btn">
				<a href="javascript:;" class="buy_btn">立即购买</a>
				<a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
			</div>
		</div>
	</div>
    <div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
                    {% for new in news %}
                    <li>
						<a href="/goods/detail/{{ new.id }}"><img src="{{ new.pic }}"></a>
						<h4><a href="#">{{ new.goods_name }}</a></h4>
						<div class="prize">￥{{ new.price }}</div>
					</li>
                    {% endfor %}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active" id="detail">商品介绍</li>
				<li class="" id="comment">评论</li>
                <li class="" id="add_comment">添加评论</li>
			</ul>

			<div class="tab_content">
				<dl id="tab_detail">
					<dt>商品详情：</dt>
					<dd>{{ goods.desc }}</dd>
				</dl>
                <dl hidden id="tab_comment">
                    <dt></dt>
                    <dd></dd>
                </dl>
                <form hidden id="tab_add_comment" action="{% url 'goods:add_comment' %}" method="post">
                    <dt><label for="">请输入评论内容:</label></dt>
                    <input hidden type="text" name="goods_id" value="{{ goods.id }}">
                    <dd><textarea name="content" id="" cols="50" rows="20"></textarea></dd>
                    <input type="submit" value="提交" class="info_submit">
                </form>
			</div>
		</div>
	</div>

{% endblock %}
{% block jump %}
    <div class="add_jump"></div>
    <script type="text/javascript">
		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;

		$(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
		$('#add_cart').click(function(){
			$(".add_jump").stop().animate({
				'left': $to_y+7,
				'top': $to_x+7},
				"fast", function() {
					$(".add_jump").fadeOut('fast',function(){
						{#$('#show_count').html(2);#}
					});
			});
		})
	</script>
{% endblock %}